import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { FormattedMessage } from 'umi-plugin-react/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select  } from 'antd';
import styles from './index.less';
import { knowledgeDialogNodeInfo } from '@/services/dialog';
import UserSession from '@/UserSession';

const SlotSelect = React.lazy(() => import('../../common/Slot/index'));
const SlotCase = React.lazy(() => import('../../common/Case/index'));
const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
  collectSlot,
  loading: loading.effects['collectSlot/fetchSlot'],
}))
class CollectSlot extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slots: [],
      dialogSlots: [],
      slotLoading: true, // 词槽加载loading
      nodeId: props.nodeId,
      stage: props.stage,
      dialogId: props.dialogId,// 多轮对话id
      selectedSlots: [],
      inquire:{
        cases:[],
        slots:[]
      }
    }
  }

  componentDidMount() {
    this.fetchSlot()
  }

  fetchSlot=async()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId,stage} = this.state;
    let { inquire } = this.state;
    if (UserSession.isSystemKnowledge()) { 
			let res = await knowledgeDialogNodeInfo({
        dialogId,
				nodeId,
				nodeType: stage,
      });
      inquire = res.dialogStage.inquire;
      if (!inquire) {
        inquire = {
          slots: [],
          cases: [],
        };
      }
      if (!inquire.slots && inquire.cases.length == 0) {
        inquire = {
          slots: [],
          cases: [],
        };
      }
      this.setState({
        dialogSlots: res.dialogSlots,
        inquire,
      });
    } else {
      dispatch({
        type: "collectSlot/fetchSlot",
        payload: {
          dialogId,
          nodeId,
          stage,
          urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
        },
        callback: (res) => {
          inquire = res.dialogStage.inquire;
          if (!inquire) {
            inquire = {
              slots: [],
              cases: [],
            };
          }
          if (!inquire.slots && inquire.cases.length == 0) {
            inquire = {
              slots: [],
              cases: [],
            };
          }
          this.setState({
            dialogSlots: res.dialogSlots,
            inquire,
          });
        },
      });
    }
    
  };

  upDataByCallBack=(res)=>{
    const {inquire} = this.state;
    inquire.cases = res;
    this.setState({
      inquire
    })
  };

  upDateSlotsByAddSlot =(res)=>{
    const {inquire} = this.state;


    inquire.slots = res;
    this.setState({
      inquire
    })
  };

  upSelectedSlotData = (res)=>{
    const {inquire} = this.state;
    inquire.slots = res;
    this.setState({
      inquire
    })
  };

  upSelectedData=(arr)=>{
    const {inquire} = this.state;
    inquire.slots = arr;
    this.setState({
      inquire
    })
  };

  fixCaseArr=(arr)=>{
    const {inquire} = this.state;
    inquire.cases = arr;
    this.setState({
      inquire
    })
  };

  saveSlotInquiry = ()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId,stage,inquire} = this.state;

    // if(inquire.slots.length ===0){
    //   return message.error('请先添加词槽再进行保存操作')
    // }
    // if(inquire.cases.length>0){
    //   for(let i of inquire.cases){
    //
    //   }
    // }
    dispatch({
      type: 'collectSlot/saveSlot',
      payload: {
        field:'inquire',
        id:dialogId+'-'+nodeId,
        inquire,
        stage
      },
      callback:(res)=>{
        message.info(res.msg);
        this.props.closeDrawer();
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const {dialogSlots,selectedSlots,inquire} = this.state;
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Row>
            <Col xs={24}>
              <div className={styles.title}>
                <span>要收集的词槽</span>
              </div>
            </Col>
            <SlotSelect
              slots={inquire.slots}
              selected={inquire.slots}
              dialogSlots={dialogSlots}
              upData={(val)=>this.upDateSlotsByAddSlot(val)}
              upSelected={(arr)=>this.upSelectedSlotData(arr)}
            />
            <SlotCase
              data={inquire.slots}
              caseArr={inquire.cases}
              selected={selectedSlots}
              dialogSlots={dialogSlots}
              upDateCase={(val)=>this.fixCaseArr(val)}
              upNewData={(val)=>this.upDataByCallBack(val)}
              upMewSelected={(arr)=>this.upSelectedData(arr)}
            />
          </Row>
          <Button type="primary" htmlType='button' onClick={()=>this.saveSlotInquiry()} style={{marginTop:20}} disabled={UserSession.isSystemKnowledge()}>保存</Button>
        </Suspense>
      </GridContent>
    );
  }
}

export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(CollectSlot));
